<div class="panel-group" id="#snapshotsListAccordion">
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#snapshotsListAccordion" target="_self" href="#snapshotList">
          snapshots
        </a>
      </h4>
    </div>
    <div id="snapshotList" class="panel-collapse collapse in">
      <div class="panel-body" style="min-height: 325px">
        <div class="row">
          <div class="form-group col-sm-6">
            <label class="form-label">snapshot name</label>
            <input ng-model="new_snap.name" class="form-control input-sm" placeholder="snapshot name">
          </div>
          <div class="form-group col-sm-6">
            <label class="form-label">repository</label>
            <select class="form-control input-sm" ng-model="new_snap.repository" ng-options="r as r.name for r in repositories">
              <option value="">select repository</option>
            </select>
          </div>
        </div>
        <div class="row">
          <div class="form-group col-xs-6">
            <label class="form-label">ignore_unavailable</label>

            <div class="row">
              <div class="col-xs-12">
                <label class="cluster-map-node-type">
                  <!-- input type checkbox margin-top -5px -->
                  <input type="checkbox" ng-model="new_snap.ignore_unavailable" ng-true-value="true" class=""> True
                </label>
                <label class="cluster-map-node-type">
                  <input type="checkbox" ng-model="new_snap.ignore_unavailable" ng-true-value="false" class=""> False
                </label>
              </div>
            </div>
          </div>
          <div class="form-group col-xs-6">
            <label class="form-label">include_global_state</label>

            <div class="row">
              <div class="col-xs-12">
                <label class="cluster-map-node-type">
                  <input type="checkbox" ng-model="new_snap.include_global_state" ng-true-value="true"> True
                </label>
                <label class="cluster-map-node-type">
                  <input type="checkbox" ng-model="new_snap.include_global_state" ng-true-value="false"> False
                </label>
              </div>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="form-group col-xs-12">
            <label class="form-label">
              indices (default is all)
              <label class="cluster-map-node-type">
                <input type="checkbox" ng-model="showSpecialIndices" ng-true-value="true"> show special indices
              </label>
            </label>
            <select multiple="multiple" ng-model="new_snap.indices" ng-options="i.name as i.name for i in indices | orderBy:'name'" class="form-control input-sm-twoxheight">
              <option value="">Default is All</option>
            </select>
          </div>
        </div>
        <div class="row">
          <div class="col-xs-12">
            <button type="submit" class="btn btn-primary rest-client-execute input-sm pull-right" ng-click="createSnapshot()">
              <i class="fa fa-file-o"></i> create
            </button>
          </div>
        </div>
        <div class="row">
          <div class="col-sm-4">
            <div class="form-group">
              <label class="form-label">repository</label>
              <select class="form-control input-sm" ng-model="snapshot_repository" ng-options="r.name as r.name for r in repositories" ng-change="selectRepository(snapshot_repository)">
              </select>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-lg-12">
            <ng-pagination page="page" paginator="paginator"></ng-pagination>
          </div>
        </div>
        <div class="row">
          <div class="col-lg-12">
            <table class="table table-bordered table-striped table-condensed">
              <tr class="header-row">
                <td>name</td>
                <td>state</td>
                <td>indices</td>
                <td>started</td>
                <td>finished</td>
              </tr>
              <tr ng-repeat="s in page.elements track by $index" ng-show="s != null">
                <td>
                  {{s.name}}
                  <a data-toggle="modal" target="_self" href="#confirm_dialog" class="remove-icon" data-backdrop="static" data-keyboard="false" tooltip="delete snapshot">
                    <i class="fa fa-times remove-icon" ng-click="deleteSnapshot(s)"></i>
                  </a>
                  <i class="fa fa-download details-icon normal-action" ng-click="selectSnapshot(s)" tooltip="restore snapshot"></i>
                </td>
                <td>{{s.state}}</td>
                <td>{{s.indices}}</td>
                <td>{{s.start_time_in_millis | date:'short'}}</td>
                <td>{{s.end_time_in_millis | date:'short'}}</td>
              </tr>
            </table>
          </div>
        </div>
        <div ng-static-include file="snapshot/restore_snapshot"></div>
      </div>
    </div>
  </div>
</div>